<template>
  <!--Vue3组件中的模板结构可以没有根标签-->
  <h1>个人信息</h1>
  姓：<input type="text" v-model="person.firstName">
  <br>
  名：<input type="text" v-model="person.lastName">
  <br>
  <span>全名：{{ person.fullName }}</span>
  <br>
  全名：<input type="text" v-model="person.fullName">
</template>

<script>
import {reactive, computed} from "vue";

export default {
  name: "Demo",
  setup() {
    let person = reactive({
      firstName: '张',
      lastName: '三',
    });
    // 计算属性-简写形式，没有考虑计算属性被修改的情况
    person.fullName = computed(() => {
      return person.firstName + "-" + person.lastName
    });

    // 计算属性的完整写法
    // person.fullName = computed({
    //   get() {
    //     return person.firstName + "-" + person.lastName;
    //   },
    //   set(value) {
    //     const nameAttr = value.split('-');
    //     person.firstName = nameAttr[0];
    //     person.lastName = nameAttr[1]
    //   }
    // });
    return {
      person
    };
  }
}
</script>

<style scoped>

</style>